<template>
	<div id="#box">
		<div class="fbox">
			<header>
				<p class="text01">欢迎登陆</p>
				<p class="text02">青年军数管中心</p>
			</header>
			<p class="pbox01">
				<span style="font: '微软雅黑'">账号：</span>
				<el-input v-model="user" placeholder="请输入内容" class="input01"></el-input>
			</p>
			<p v-show="ushow" class="msg">{{umsg}}</p>
			<p class="pbox02">
				<span style="font: '微软雅黑'" >密码：</span>
				<el-input placeholder="请输入密码" v-model="password" show-password class="input01"></el-input>
			</p>
			<p class="pbox04">
				<span style="cursor: pointer;color: orangered" @click="forgot">忘记密码？</span>
				<!--<span style="cursor: pointer;">进入首页</span>-->
			</p>
			<p v-show="pshow" class="msg">{{pmsg}}</p>
			<p class="pbox03"> 
				 <el-button type="info" style="width: 200px;" @click='login'>登陆</el-button>
			</p>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				user:'',
				password:'',
				umsg:'',
				pmsg:'',
				ushow:false,
				pshow:false
			}
		},
		methods:{
			login(){
				var reg01 = /^[a-z]{2,30}$/;
				var reg02 = /^(?=.*\d)(?=.*[a-zA-Z0-9])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{6,18}$/;
				if(this.user==''){
					this.umsg='账号不能为空';
					this.ushow=true;
				}else if(this.password==''){
					this.pmsg='密码不能为空';
					this.pshow=true;
//					this.password=this.$md5(this.password)
//					console.log(this.password)
				}else if(!reg01.test(this.user)){
					this.umsg='账号需为2-30为小写英文字母';
					this.ushow=true;
				}else if(!reg02.test(this.password)){
					this.pmsg='密码需为6-18为字母+数字+特殊字符组合';
					this.pshow=true;
				}else{
					this.$router.push({path:'/index'});
					this.show=false;
					this.password=this.$md5(this.password)
					console.log(this.password)
				}
			},
			forgot(){
				this.$router.push({path:'/forgot'});
			}
		}
	}
</script>

<style scoped="scoped">
	#box{
			
	}
	header{
		width: 100vw;
		height: 30vh;
		background-image: url(../../assets/header.png);
		background-size: 100% ;
		background-repeat: no-repeat;
		background-position: 0px 0px 50px 0px;
		text-align: center;
		overflow: hidden;
	}
	.fbox{
		width: 100vw;
		height: 100vh;
		text-align: center;
	}
	.text01{
		margin: 60px 0px 20px 0px;
		color: white;
		font: "微软雅黑" ;
		font-size: 30px;
	}
	.text02{
		margin: 0px 0px 0px 0px;
		color: white;
		font: "微软雅黑" ;
		font-size: 30px;
	}
	.pbox01{
		margin-top: 100px;
	}
	.pbox02{
		margin-top: 40px;
	}
	.pbox03{
		margin-top: 60px;
	}
	.input01{
		width: 20vw;
	}
	.msg{
		margin: 20px 0px;
		color: orangered;
	}
	.pbox04{
		display: flex;
		justify-content: space-between;
		width: 250px;
		margin: 5px auto;
	}
</style>